import axios from 'axios'
import {layer} from 'vue3-layer'
import Token from '@/api/token.js'
import router from '@/router/index.js'

const instance = axios.create({
    baseURL: 'http://localhost:8000',
    timeout: 10000,
    // 设置特殊的头信息，用来告诉服务器，这是一个异步请求
    headers:{"X-Requested-With": "XMLHttpRequest"}
})

instance.interceptors.request.use(async function (config) {
    if (config.loading) {
        // layer.load：开启一个loading加载效果 支持（0，1，2）三种加载风格
        config.loadingIndex = layer.load(2);
    }
    // 判断 config 中是否包含 permission （如果有该参数，说明该接口需要令牌）
    if (config.permission == null || config.permission === true){
        // 获取访问令牌(等待结果)
        let accessToken = await Token.getAccessToken()

        if (accessToken == null){
            // 跳转到登录页面（令牌为空）
            router.push({name: 'LoginView'});
            throw new Error("未登录")
        }
        // 携带这个数据，调用接口
        config.headers["Authorization"] = "Bearer " + accessToken
    }

    // Do something before request is sent
    return config;
  }, function (error) {
    // Do something with request error
    return Promise.reject(error);
  });


  // Add a response interceptor
instance.interceptors.response.use(function (response) {
    
    if (response.config.loadingIndex){
        layer.close(response.config.loadingIndex)
    }
    return response.data;
  }, function (error) {
    if(error.status && error.status === 404){
        // 获取服务器返回的错误信息，展示给用户
        // icon：设置错误的图标
        layer.msg("数据未找到", {icon: 2})
    }else if(error.status && error.status === 405 || error.status === 401){
        layer.msg(error.response.data.detail, {icon: 2})
    }else if(error.status && error.status === 400){
        let data = error.response.data;
        for(let [key, val] of Object.entries(data)){
            layer.msg(`${key}${val}`, {icon: 2});
            break; // 只展示第一个error
        }   
    }else if(error.status && error.status === 500){
        layer.msg("服务器异常", {icon: 2})
    }else{
        layer.msg("未知错误", {icon: 2})
    }
    if (error.response && error.response.config.loadingIndex){
        layer.close(error.response.config.loadingIndex)
    }
 
    return Promise.reject(error);
  });

  export default instance;
